<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建角色</title>

    <style type="text/css">
        #con {
            background: url("image/background1.jpg") no-repeat;
            background-size: cover;
            position: absolute;
            top: 0;
            bottom: 0px;
            right: 0px;
            left: 0px;
        }
        #div{
            width: 600px;
            height: 600px;
            margin-top: 200px;
            margin-left: 600px;
        }
    </style>
</head>
<body>
<div id="con">
    <div id="div">
        <div>
            <span>角色名</span>
            <input type="text" id="username">
        </div>
        <br>
        <div>
            <span>性别</span>
            <select id="sex">
                <option >男</option>
                <option >女</option>
            </select>
        </div>
        <br>
        <div>
            <span>职业</span>
            <select id="occupation">
                <option >药神</option>
                <option >战士</option>
                <option >法师</option>
            </select>
        </div>
        <br>
        <br>
        <div>
            <button id="ok" style="margin-left: 60px">确定</button>
            <button id="cal" style="margin-left: 40px">取消</button>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="jquery-1.9.1.js"></script>

<script type="text/javascript">
    $ok = $("#ok");
    //添加时间
    $ok.click(function () {
        //获取数据
        var  username = $("#username").val();
        var sex = $("#sex").val();
        var race = $("#race").val();
        var occupation = $("#occupation").val();
        //ajax异步请求
        $.ajax({
            "url": "/get.action",
            "type": "get",
            "data": {"username":username,"sex":sex,"race":race,"occupation":occupation},
            "success": function (data, msg, xhr) {
               if( confirm("用户名: "+data.username+"\n"+
                       "性别: "+data.sex+"\n"+
                       "职业: "+data.occupation+"\n"+
                       "力量: "+data.strength+"\n"+
                       "体力: "+data.physicial+"\n"+
                       "智力: "+data.intellige+"\n"+
                       "物攻: "+data.pattack+"\n"+
                       "魔攻: "+data.mattack+"\n"+
                       "生命值: "+data.life+"\n"+
                       "魔法: "+data.magic+"\n")==true){
                   f1();//点击确定以后正式添加角色
               }
            },
            "error": function () {
                alert("存在角色");
                $(window).attr("location","mainpage.html");
            }
        });
    })

</script>
<script type="text/javascript">
    function f1() {
        $.ajax({
            "url": "/create.action",
            "type": "get",
            "success": function (data, msg, xhr) {
                alert("创建成功");
                $(window).attr("location","mainpage.html");
            },
            "error": function () {
                console.log("创建失败...");
            }
        });
    }
    
</script>
</html>